.dataAll{
    width: 100%;
    height: 33%;
    background-color: rgba(2,8,23,0.1);
    float: left;
    border-radius: 10px;
    /*margin-top: 10px;*/
    /*margin-left: 10px;*/
}

.dataAllNo01{
    width: 100%;
    height: 100%;
    background-color: rgba(2,8,23,0.1);
    float: left;
    border-radius: 10px;
    /*margin-top: 10px;*/
    /*margin-left: 10px;*/
}
.dataAllNo02{
    width: 100%;
    height: 100%;
    background-color: rgba(2,8,23,0.1);
    float: left;
    border-radius: 10px;
    /*margin-top: 10px;*/
    /*margin-left: 10px;*/
}
.dataAll01{
    width: 100%;
    height: 66%;
    background-color: rgba(2,8,23,0.1);
    float: left;
    border-radius: 10px;
    /*margin-top: 10px;*/
    margin-left: 10px;
}
.dataAll02{
    width: 100%;
    height: 33%;
    background-color: rgba(2,8,23,0.1);
    float: left;
    border-radius: 10px;
    /*margin-top: 10px;*/
    margin-left: 10px;
}
.maginS{
    /*margin-top:13% !important;*/
}
.maginS01{
    /*margin-top:11% !important;*/
}
/* 基础框架，不能改 */
.dataAllBorder01{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px #f80404 solid;
    padding: 1px;
    box-sizing: border-box;
}
/* 基础框架，不能改*/
.dataAllBorder02{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border:2px solid #fbf306;
    border-radius: 10px;
}

.kuang01{
    width: 100%;
    height: 100%;
    border: 2px;
    padding: 2px;  
    box-sizing: border-box;
    border-radius: 10px;  
}
.kuang05{
    width: 100%;
    height: 90%;
    border: 2px;
    padding: 2px;  
    box-sizing: border-box;
    border-radius: 10px;
    bottom: 100%;
    overflow: auto! important;
}
.kuang06{
    width: 100%;
    height: 78%;
    border: 2px;
    padding: 2px;  
    box-sizing: border-box;
    border-radius: 10px;
    bottom: 100%;
    overflow: auto! important;
}
/* 搜索视频框 */
.kuang04 {
    width: 95%;
    border: 2px;
    padding: 2px;  
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 7%;
}
.kuang04 form {
display: flex;
height: 50px; 
}
.kuang04 input[type="text"] {
width: 85%;
height: 100%;   
padding: 1px 15px;
font-size: 16px;
border: 2px solid #ffffff;
border-radius: 4px 0 0 4px; /* 左侧圆角 */
}
.kuang04 button {
width: 8%;
height: 100%;   
padding: 5px;
background: none;
background-image: url('../video/搜索框搜索标签.jpg'); 
background-size: cover;
color: rgb(6, 123, 22);
font-size: 17px;
border: 2px solid #ffffff;
border-left: none;
border-radius: 0 4px 4px 0; /* 右侧圆角 */
cursor: pointer;
overflow: hidden; /* 防止图片溢出 */
box-sizing: border-box;
}
.kuang04 button:hover {
border: 2px solid #000000;        
}
.kuang04 input[type="text"]:hover {
border: 2px solid #000000;        
}
img {
width: 10%;
height: 10%;
object-fit: cover; /* 或 contain，根据需求选择 */
display: inline;
}
.List {
    position: absolute;
    top: 3px;
    right: 5px;
    width: 25px;
    height: 25px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23333" d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>');
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #f5f5f5;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
.right-btn {
    position: absolute;
    top: 6px;
    right: 5px;
    width: 22px;
    height: 22px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23333" d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>');
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #f5f5f5;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    z-index: 10; /* 确保按钮在最顶层 */
}
.route-right-btn {
    position: absolute;
    top: 38px;
    right: 12px;
    width: 22px;
    height: 22px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23333" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>');
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #f5f5f5;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    z-index: 10; /* 确保按钮在最顶层 */
}

.button {
    border: 2px;
    padding: 2px;  
    box-sizing: border-box;
    width: 100%;
    height: 7%;
    display: flex;
    justify-content: center; 
    align-items: center;     
    gap: 10px;              
}

button.route-btn {
    display: inline-block;  /* 行内块元素 */
    width: 45%;          /* 宽度 150px */
    height: 20%;          /* 高度 80px */
    background-color: white; /* 白色背景 */
    padding: 2px ;
    margin: 2px ;
    box-sizing: border-box;
    border: 1px solid #2d7df5;  /* 边框（可选） */
    border-radius: 4px;     /* 圆角（可选） */
    font-size: 16px;       /* 字体大小 */
    cursor: pointer;       /* 鼠标悬停变成手指形状 */
}

/* 视频+时间框 */
.kuang02 {
    width: 49.5%;
    height: 30%;
    padding: 2px;
    border: 2px;
    box-sizing: border-box;
    float: left;
    object-fit: fill;
}
/* 时间框 */
.kuang03{
    float: left;
    object-fit: fill;
    background-color: #fff;
    border-radius: 10px;
    width: 100%;
}
.editable-title {
    width:100%; 
    padding:2px;
    background:#f5f5f5;
    border:1px solid #ddd;
    color:#333;
    font-style:italic;
    font-size:12px;
}
.editable-title:focus {
    background: white !important;
    font-style: normal;
    box-shadow: 0 0 2px rgba(125, 123, 123, 0.489);
}


.data_tit{
    width: 32%;
    height: 7%;
    background-image: url("../img/tit01s.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin:0 auto;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
}
.nav_active {
    border-bottom: 4px solid #4b8df8;
    /*box-shadow: -10px 0px 15px rgba(2,8,23,0.54) inset,*/
    /*0px -10px 15px rgba(2,8,23,0.54) inset,*/
    /*10px 0px 15px rgba(2,8,23,0.54) inset,*/
    /*0px 10px 15px rgba(2,8,23,0.54) inset;*/
    box-sizing: border-box;
}
.data_tit1{
    width: 46%;
    height: 10%;
    background-image: url("../img/tit01s.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin:0 auto;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
}
.data_tit2{
    width: 36%;
    height: 5%;
    background-image: url("../img/tit01s.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin:0 auto;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
}
.data_tit3{
    width: 44%;
    height: 3%;
    background-image: url("../img/tit01s.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin:0 auto;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
}
.data_left01{
    float: left;
    width: 22%;
    height: 100%;
    margin-left: 10px;

}
.data_chart{
    width: 96%;
    margin-left: 2%;
    height: 90%;
    padding-top: 2%;

}
.data_chart01{
    width: 98%;
    margin-left: 2%;
    height: 50%;
    padding-top: 10px;

}
.data_chart02{
    width: 96%;
    margin-left: 2%;
    height: 90%;
    padding-top: 2%;

}
.data_chart03{
    width: 96%;
    margin-left: 2%;
    height: 92%;
    padding-top: 2%;

}
.data_left02{
    float: left;
    width: 31%;
    height: 100%;
    margin-left: 10px;

}
.data_left03{
    float: left;
    width: 26%;
    height: 99%;
    margin-left: 0.5%;

}
.data_left04{
    float: left;
    width: 46%;
    height: 99%;
    margin-left: 0.5%;

}
.data_left05{
    float: left;
    width: 49%;
    height: 49%;
    margin-left:0.6%;


}
.table_data01{
    width: 96%;
    margin-left: 2%;
    border-collapse: collapse;
    color: #ffffff;
    margin-top: 10px;
}
.table_data01 tr td{
    border: 1px solid #5bc0de;
    padding-top: 5px;
    padding-bottom: 5px;
    text-indent: 10px;
}
.table_data02{
    width: 96%;
    margin-left: 2%;
    border-collapse: collapse;
    color: #ffffff;
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid #5bc0de;
}
.table_data02 tr td{

    padding-top: 8px;
    padding-bottom: 8px;
    text-indent: 10px;
}
.font01{
    font-size: 30px;
    color: #4cae4c;
}
.font02{
    font-size: 30px;
    color: #e9230d;
}
.font03{
    font-size: 30px;
    color: #e9a832;
}
.font04{

    color: #a4e90f;
    font-size: 18px;
}
.font05{

    color: #e92b23;
    font-size: 18px;
}
.font6{
    font-weight: bold;
    font-size: 18px;

}
.font07{
    font-size: 30px;

}
.zhanleft01{
    width: 49%;
    height: 38%;
    float: left;
    margin-left: 1%;
    /*padding-top: 10px;*/
    display: inline-block;
    padding-top: 2%;

}
.zhanleft02{
    width: 96%;
    height: 40%;
    margin-left: 2%;
    /*padding-top: 20px;*/
    float: left;
    padding-top: 7%;
}

.information01 {
    padding: 6px 12px;
    background: white;
    border: 1px solid #4A90E2;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    color: #333;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    white-space: nowrap;
}

/* 文件 */
.folder01 {
    font-size: 0; /* 消除行内块元素间的默认间隙 */
    width: 100%; /* 确保容器宽度填满父元素 */
    padding: 2px; /* 添加内边距 */
    box-sizing: border-box; /* 包含内边距在宽度内 */
    overflow: auto! important;
    border: 4px solid rgba(42, 143, 238, 0.511);     
}
.folder-title {
    color: white; /* 白色文字 */
    text-align: center; /* 居中显示 */
    margin: 2px 0; /* 上下边距 */
    font-size: 2.2rem; /* 适当放大字号 */
    position: relative; /* 为装饰元素定位 */
}
.folder{
    width: 46%; /* 25%宽度减去2%的间距 */
    height: 0;
    padding-bottom: 25%; /* 保持宽高比(近似4:3) */
    border: 3px solid #ccc; /* 添加边框样式 */
    box-sizing: border-box;
    display: inline-block;
    margin: 1%; /* 创建间距 */
    position: relative; /* 为内部图片定位做准备 */
    cursor: pointer; /* 鼠标悬停显示手型 */
    transition: all 0.3s ease; /* 添加悬停动画 */
    border-radius: 5px; /* 圆角边框 */
    overflow: hidden; /* 隐藏溢出内容 */
    /* background-color: #f5f5f5; 默认背景色 */

}
.folder:hover {
    border-color: #4a90e2; /* 悬停时边框变色 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
    transform: translateY(-3px); /* 轻微上浮效果 */
}
.folder img {
    position: absolute; /* 绝对定位填充整个容器 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例填充 */
    transition: transform 0.3s ease; /* 图片缩放动画 */
}
.folder:hover img {
    transform: scale(1.05); /* 悬停时图片轻微放大 */
}

.scroll-container {
    height: 0%;
    overflow-y: auto; /* 垂直滚动条 */
    display: flex;
    flex-direction: column; /* 垂直排列子元素 */
    gap: 10px; /* 文件项间距 */
    padding-right: 5px; /* 避免滚动条遮挡内容 */
  }
  
  /* 滚动条美化 */
  .scroll-container::-webkit-scrollbar {
    width: 8px;
  }
  .scroll-container::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 4px;
  }
  .scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }
  
  /* 地图右下角经纬度信息框 */
.map-coordinates-popup {
    position: absolute;
    bottom: 80px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s;
}

/* 确保地图容器有相对定位 */
#map, #map_Full {
    position: relative !important;
}